{% extends "base.html" %}

{% block styles %}
<style>
  .hidden {
      opacity: 0;
      height: 0;
  }
  .token {
      position: relative;
      overflow: hidden;
  }
  .token__code {
      display: inline-block;
      width: 100%;
      white-space: pre-wrap;
      word-wrap: break-word;
      color: #696969;
      background-color: transparent;
      padding: 1em;
  }
  .token__overlay {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(transparent, white 60%);
      transition: top 0.2s;
  }
  .token:hover .token__overlay {
      top: 100%;
  }
  .close {
      color: gray;
  }
</style>
{% endblock %}

{% block scripts %}
<script type="text/javascript">
  function clipToken() {
      var token = document.querySelector("#token");
      token.select();
      document.execCommand("copy");
  }
</script>
{% endblock %}

{% block main %}
<div class="content">
  <h1>OAuth Service</h1>
  <p class="is-size-7 has-text-grey">This service should be used by the {{ meltano_link | safe }} application.</p>
</div>

<div class="box">
  <h2 class="subtitle">Your access token</h2>
  <div class="token">
    <code class="token__code">{{ token }}</code>
    <figure class="token__overlay"></figure>
  </div>

  <input id="token" class="hidden" type="textarea" value="{{ token }}" />
  <button class="button is-primary is-fullwidth" onclick="clipToken();">Copy to clipboard</button>
</div>
<p class="close">You can now close this window.</p>
{% endblock %}
